<template>
    <div class="mainDiv" style="padding: 10px;box-sizing: border-box;">
        <div>
            <el-steps :active="active" center finish-status="success" style="margin: 15px 15px 0px !important" align-center>
                <el-step title="开卡"></el-step>
                <el-step title="结账分配业绩"></el-step>
                <el-step title="分配提成"></el-step>
            </el-steps>
        </div>
        <Order @goto="step" :order="order" v-if="active == 0"></Order>
        <Pay @goto="step" :order="order" :yejilist="yejilist" :paylist="paylist" v-if="active == 1"></Pay>
        <Allot @goto="step" :order="order" :fenpeilist="fenpeilist" :tichenglist="tichenglist" v-if="active == 2"></Allot>
        <Finish @goto="step" :order="order" :paylist="paylist" :fenpeilist="fenpeilist" v-if="active == 3"></Finish>
    </div>
</template>
<script>
import C from '@/common/common.js'
import Order from './order.vue'
import Pay from './pay.vue'
import Allot from './allot.vue'
import Finish from './finish.vue'

export default {
  name: 'addOpenCard',
  data () {
    return {
      // 重新规划数据
      // 初始化
      // 重要数据（开卡）
      order: {
        id: '',
        status: '',
        remarks: '',
        orderlist: [],
        ginfo: {id: ''}
      },
      // 结账
      paylist: [],
      yejilist: [],
      // 分配
      fenpeilist: [],
      tichenglist: [],

      // 杂项
      active: 0
    }
  },
  methods: {
    step: function (obj) {
      // 第一步，如果有id掉数据，没有添加
      //
      // 步骤说明：订单的status=0可以在0,1页面，status=1可以在1,2页面，status=3可以在2,3页面
      if (obj.id) {
        this.order.id = obj.id
      }
      if (obj.status) {
        this.order.status = obj.status
      }

      if (obj.index == 0 && (this.order.status && this.order.status != 0)) {
        C.error('请先反结账订单再编辑！')
        return false
      }
      if (obj.index == 1 && !this.order.id) {
        C.error('请先保存订单！')
        return false
      }
      if (obj.index == 2) {
        if (!this.order.id || this.order.status == 0) {
          C.error('请先结账！')
          return false
        }
      }
      if (this.order.id) {
        this.getorderinfo(this.order.id)
      }
      this.active = obj.index
    },
    getjisuanticheng: async function (id) {
      let data = await C.ajax('/shop/card/getjisuanticheng', { id: id }, 'post')
      if (data) {
        this.tichenglist = data.orderlist
        this.fenpeilist = data.fenpeilist
      }
    },
    getorderinfo: async function (id) {
      let data = await C.ajax('/shop/card/getkaikadaninfo', { id: id })
      if (data) {
        // 赋值订单信息
        this.order = Object.assign(this.order, data.order)

        // 赋值用户信息
        data.ginfo.headurl = data.ginfo.headurl != 0 ? data.ginfo.headurl : '../../../static/img/headimg.jpg'
        this.order.ginfo = data.ginfo
        // 整合订单列表信息
        if (this.order.status === '') {
          this.active = Number(data.order.status) + 1
        }
        if (this.active == 2 || this.active == 3) {
          this.getjisuanticheng(this.order.id)
        }

        data.orderlist.forEach((row) => {
          row.name = row.typename
          row.id = row.typeid
          row.rowtype = row.type
        })
        if (this.order.orderlist.length <= 0) this.order.orderlist = data.orderlist
        // 开始处理付款信息
        let paylist = []
        if (data.accountlist.length > 0) {
          data.accountlist.forEach((row) => {
            paylist.push({
              type: 1,
              accountname: row.name,
              accountid: row.accountid,
              paymoney: row.paymoney
            })
          })
        }
        this.paylist = paylist
        // console.log(data.yejilist)
        if (data.yejilist.length > 0) {
          data.yejilist.forEach((row) => {
            row.username = row.name
          })
        }
        this.yejilist = data.yejilist
      }
    }
  },
  mounted: async function () {
    let data = C.getDatas()
    if (data.gid) {
      this.order.ginfo.id = data.gid
    }
    if (data.id) {
      this.order.id = Number(data.id)
    }
    if (data.status) {
      this.order.status = Number(data.status)
    }
    // id = 1257
    if (!this.order.status && !this.order.id) {
      this.step({index: 0})
    } else {
      this.step({index: Number(this.order.status) + 1})
    }
  },
  components: {Order, Pay, Allot, Finish}
}
</script>
<style>
.el-input.is-disabled .el-input__inner {
    color: #324057;
}

.el-textarea__inner {
    resize: none;
}

#discount {
    width: 100px;
}

#discount i {
    display: none;
}

.el-switch.is-checked .el-switch__core {
    border-color: #20a0ff !important;
    background-color: #20a0ff !important;
}

.money input {
    background: #defff5;
}

.tableClass{
    height: 100%;
    position: relative;
}

.tableClass .el-form-item__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;

}
.el-table__body{
    width: 100%
}
</style>